<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
    html,
    body {
        width: 100%;
    }
    </style>
</head>

<body>
    <div class="aui-content">
        <ul id='list' class="aui-user-view">
                <template v-for="item in items">
                    <li class="aui-user-view-cell aui-img" onclick="fnloadMusic('{{item.url}}','{{item.title}}','{{item.author}}')">
                        <img class="aui-img-object aui-pull-left" :src="baseUrl+item.smallimg">
                        <div class="aui-img-body aui-arrow-right">
                            <span>{{item.title}}</span>
                            <p class="aui-ellipsis-1">{{item.author}}</p>
                        </div>
                    </li>
                </template>
            </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
//跳转music页面的方法
function fnloadMusic(url,songName,singer){
    //打开win窗体
    api.openWin({
        name: 'music',
        url: './music.html',
        pageParam: {
            // name: 'test'
            url: url,
            songName: songName,
            singer:singer
        }
    });
}
//定义数据偏移量
var skip = 0;
var LIMIT = 2;
var vm;
//定义获取数据列表的方法
function fnloadList(isPull){
    //通过ajax获取接口的数据
    api.ajax({
        url: 'http://192.168.89.71/appapiheima4/index.php/Admin/Manager/newsApi',
        method: 'get',
        data: {
            values: {
                // name: 'haha'
                skip: skip,
                limit: LIMIT,
            },
            files: {
                file: 'fs://a.gif'
            }
        }
    }, function(ret, err) {
        if (ret) {
            //获取到数据调用的方法
            //定义计算实际偏移量
            if(ret.lenth < LIMIT){
                //计算现在数据长度 小于偏移量,跳过的数量就是
                //数据长度
            skip += ret.lenth;
            }else{
                //最小偏移两个
                skip += LIMIT;
            }
            //判断是否为下拉操作
            if(isPull){
                //循环追加数据
                for (var i = ret.length - 1; i >= 0; i--) {
                    vm.items.unshift(ret[i]);
                }
               return ;
            }
            //使用vue进行渲染页面
            vm = new Vue({
                el: '#list',
                data: {
                    items: ret,
                    //定义网站域名链接
                    baseUrl:'http://192.168.89.71/appapiheima4'
                }
            });
        } else {
            api.alert({ msg: JSON.stringify(err) });
        }
    });
}
apiready = function() {
    //调用列表获取数据方法
    fnloadList();
    //实现下拉刷新操作
    api.setRefreshHeaderInfo({
        loadingImg: 'widget://image/pull.gif',
        bgColor: '#ccc',
        textColor: '#fff',
        textDown: '下拉刷新...',
        textUp: '松开刷新...',
        showTime:false
    }, function(ret, err) {
        //获取最新数据
        fnloadList(true);
        //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
        api.refreshHeaderLoadDone();
    });
};
</script>

</html>
